<script setup lang="ts">

import { positionTypeListAPI } from '@/api/task'
import { taskStore } from '@/store/task'
import { Toast } from 'vant';
import { inject, reactive } from 'vue'

    const store = taskStore()
    const state = reactive({
        typeKey: 0
    })
    const getpositionList = async() => {
        const res = await positionTypeListAPI()      
        if (res) {
            store.setpositionList(res)
        }else{
            Toast(res.msg)
        }
    }
    //store里面的cityList没有数据 执行获取城市列表
    if (store.cityList.length <= 0)  getpositionList()

    // 接收父级传递的关闭弹窗的方法
    const closePositionType = inject('closePositionType')
    // 点击返回 关闭弹窗
    const onClickLeft = () => closePositionType()
    
    const setTypeKey = (key: number) => {
        state.typeKey = key
    }
</script>


<template>
    <van-nav-bar
        title="职位类型"
        left-arrow
        @click-left="onClickLeft"
    />
    <div class="position-type" >
        <div class="position-type-left">
            <h5 v-for="(item, index) in store.positionList" 
                :key="index"
                @click="setTypeKey(index)"
                :class="state.typeKey == index ?'active': ''"
            >
            {{ item.name }}
            </h5>
        </div>
        <div class="position-type-right">
            <span 
                v-for="(item, index) in store.positionList[state.typeKey] && store.positionList[state.typeKey].children"
                :key="index"
                @click="closePositionType(item.name)"
            >
                {{ item.name }}
            </span>
        </div>
    </div>

</template>

<style scoped>
.position-type {
    display: flex;
}
.position-type-left {
    width: 4.77rem;
    height: calc(100vh - 46px);
    background: #f6f6f6;
}
.position-type-left h5 {
    width: 4.77rem;
    height: 2.4rem;
    background: #f6f6f6;
    border-bottom: 1px solid #ffffff;
    text-align: center;
    font-weight: 400;
    font-size: 0.75rem;
    color: #333333;
    line-height: 2.4rem;
}
.position-type-left h5.active {
    background: #EFEFEF;
}
.position-type-right {
    margin-left: 0.6rem;
    margin-top: 0.8rem;
}
.position-type-right span{
    width: 6.61rem;
    height: 2.03rem;
    background: #FFFFFF;
    border-radius: 0.11rem;
    border: 1px solid #E9E9E9;
    line-height: 2.03rem;
    font-weight: 300;
    font-size: 0.75rem;
    color: #666666;
    margin-bottom: 0.64rem;
    margin-right: 0.59rem;
    display: inline-block;
    text-align: center;
}
.position-type-right span:nth-child(2n) {
    margin-right: 0;
}
</style>